<template>
  <el-config-provider :locale="zhCn">
    <client-only>
      <NuxtLayout name="default">
        <NuxtPage />
      </NuxtLayout>
      <template #fallback>
        <a-spin />
      </template>
    </client-only>
  </el-config-provider>
</template>
<script setup lang="ts">
import 'element-plus/theme-chalk/dark/css-vars.css'
import '@/assets/css/css-vars.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

</script>
<style>
/*毛玻璃效果*/
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}

/*左右推拉效果*/
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.2s;
}
.slide-left-enter-from {
  opacity: 0;
  transform: translate(50px, 0);
}
.slide-left-leave-to {
  opacity: 0;
  transform: translate(-50px, 0);
}
.slide-right-enter-from {
  opacity: 0;
  transform: translate(-50px, 0);
}
.slide-right-leave-to {
  opacity: 0;
  transform: translate(50px, 0);
}


/*淡入淡出*/
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/*推拉淡出*/
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

/*旋转效果*/
.rotate-enter-active,
.rotate-leave-active {
  transition: all 0.4s;
}
.rotate-enter-from,
.rotate-leave-to {
  opacity: 0;
  transform: rotate3d(1, 1, 1, 15deg);
}

/*心跳效果*/
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

.ant-menu-light.ant-menu-root.ant-menu-inline,ant-menu-light.ant-menu-root.ant-menu-vertical{
  border:0!important;
}
.ant-layout .ant-layout-sider,
.ant-layout .ant-layout-sider{background:#fff;}
.ant-pagination .ant-pagination-item-active{border-color:#45c985;}
.ant-pagination .ant-pagination-item-active a,
.ant-menu-light .ant-menu-item-selected,
.ant-menu-light .ant-menu-submenu-selected >.ant-menu-submenu-title{color:#45c985;}
.ant-switch.ant-switch-checked,
.ant-btn-primary{background-color: #45c985}
ant-menu-light.ant-menu-root.ant-menu-inline{border:0;}
.ant-layout .ant-layout-header{height: 45px;line-height: 45px;}
</style>